<template>
  <div id="app">
    <div class="topBar">
      <div>
        <i class="iconfont icon-yinle2"></i>
        <i>SIM Music</i>
      </div>
    </div>
    <!-- 主页导航栏 -->
    <TopNav></TopNav>
    <!-- 主页导航栏 -->

    <!-- 页面下方固定的小播放器 -->
    <Play></Play>
    <!-- 页面下方固定的小播放器 -->
    <router-view></router-view>
    <div
      :style="{
        paddingBottom: $root.musicStore.musicID ? '60px' : '',
      }"
    ></div>
  </div>
</template>
<script>
import TopNav from "@/components/TopNav";
import Play from "./components/Play.vue";
export default {
  name: "App",
  data() {
    return {
      musicID: null,
    };
  },
  components: {
    TopNav,
    Play,
  },
};
</script>
<style lang="less" scoped>
.topBar {
  padding: 10px;
  background: rgb(255, 208, 0);
  div {
    i {
      &:first-of-type {
        font-size: 25px;
      }
      &:nth-of-type(2) {
        margin-left: 6px;
        font-size: 22px;
      }
    }
  }
}
</style>
